<script setup lang="ts">
import { PagePath } from '@/common/constants'
import type { Dynamic } from '@/common/types/dynamic'

defineProps<{
  dynamic: Dynamic
}>()
</script>

<template>
  <!-- 动态项组件 -->
  <view class="dynamic" @click="() => goToPage(`${PagePath.DYNAMIC_DETAIL}?dynamicId=${dynamic.id}`)">
    <image :src="dynamic.imgUrl" mode="aspectFill" class="dynamic-img" />

    <text class="dynamic-title">
      {{ dynamic.title }}
    </text>
    <view class="dynamic-info">
      <view class="dynamic-info-user">
        <image :src="dynamic.userAvatar" mode="aspectFit" class="dynamic-info-user-avatar" />
        <view class="dynamic-info-user-info">
          <text class="dynamic-info-user-name">
            {{ dynamic.nickname }}
          </text>
        </view>
      </view>
      <view class="dynamic-info-like">
        <image :src="IconPath.LIKE" mode="scaleToFill" class="dynamic-info-like-img" />
        <text class="dynamic-info-like-count">
          {{ dynamic.likeCount }}
        </text>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.dynamic {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  border-bottom: 1px solid $bg-primary-opacity-1;
  padding-bottom: 30rpx;

  &-img {
    width: 100%;
    height: 300rpx;
    border-radius: $border-radius-base;
  }

  &-title {
    font-size: $font-size-base;
    color: $uni-text-color;
    padding-inline: 20rpx;
  }

  &-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 20rpx;

    &-user {
      display: flex;
      gap: 20rpx;

      &-info {
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 12rpx;
      }

      &-avatar {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;

      }

      &-name {
        font-size: $font-size-base;
      }

      &-level {
        font-size: $font-size-sm;
        padding: 4rpx 10rpx;
        background-color: $color-primary;
        text-align: center;
        color: $color-white;
        border-radius: 200rpx;
      }

    }

    &-like {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5rpx;
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;

      &-img {
        width: 50%;
        height: 50%;
        fill: $color-white;
      }

      &-count {
        font-size: $font-size-sm;
        color: $color-primary;
      }
    }
  }
}
</style>
